<template>
  <div class="chart">
    <el-card>
      <div class="echarts"
           ref="myCharts"></div>
    </el-card>
  </div>
</template>
<script>
/*
echarts基本使用
1：安装  npm i echarts
2:导入 import echarts from 'echarts'
3:实例化 var myecharts= echarts.init("dom地址")
4：加入配制option，应该用  myecharts.setOption(配制对象)
*/
var echarts = require('echarts');
export default {
  data () {
    return {
      info: ""
    };
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    // console.log(this.$refs.echarts)
    var myChart = echarts.init(this.$refs.myCharts)
    // const myChart = echarts.init(this.$refs.myCharts)
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }]
    };
    // 绘制图表
    myChart.setOption(option);
  },
};
</script>
<style lang="less">
.chart {
  height: 100%;
  background-color: #fff;
  .list {
    //弹性例子布局
    display: flex;
    //主轴分布
    justify-content: space-around;
    //侧轴分布
    align-items: center;
    //文本居中
    text-align: center;
    //颜色处理
    .color1 {
      border: 3px solid #0086fa;
      color: #0086fa;
    }
    .color2 {
      border: 3px solid #f76137;
      color: #f76137;
    }
    .color3 {
      border: 3px solid #55cd78;
      color: #55cd78;
    }
    //画圈圈
    .itemContent {
      border-radius: 50%;
      width: 99px;
      height: 99px;
      line-height: 99px;
    }
  }
  .echarts {
    height: 500px;
  }
}
</style>